<template>
  <div style="margin-left: 10%;">
    <div style="padding: 10px 5%;  width: 80%; height: 85vh; background-color: #fafafa; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.14);">
      <div style="width: 250px; height: 150px; margin: 50px 0 0 40%; font-size: 20px; font-weight: bold;color: coral;">推荐商家上架</div>
      <div style="border: #d1d9e6 1px solid;margin-top: -60px"></div>

      <div style="width: 90%; height: 25%; margin-left: 5%; padding: 20px 0 0 20%; margin-top: 5px;">
        <el-form :label-position="labelPosition" label-width="180px" :model="form" class="custom-label">
          <!--订单编号-->
          <el-form-item label="订单编号" style="width: 350px; text-align: left; margin-top: 5px; padding-top: 10px;">
            <el-input v-model="form.orderCode" placeholder="请输入订单编号"></el-input>
          </el-form-item>
          <!--推荐内容-->
          <el-form-item label="推荐内容" style="width: 350px; text-align: left; margin-top: 5px; padding-top: 10px;">
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.suggestion"></el-input>
          </el-form-item>

          <!--提交反馈-->
          <el-form-item style="text-align: left; padding-top: 10px;">
            <el-button @click="cancel">取消推荐</el-button>
            <el-button type="primary" @click="submit">提交推荐</el-button>
          </el-form-item>


        </el-form>
      </div>

    </div>

  </div>
</template>

<script>

import request from "@/utils/request";

export default {
  name: "shopperserviceview",
  data() {
    return {
      user: sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {},
      labelPosition: 'right',
      form: {
        orderCode:'',
        suggestion: '',
      },

    }
  },
  created() {

  },
  methods: {
    cancel() {
      this.form.orderCode = "";
      this.form.suggestion = "";
    },
    submit() {
      //首先检查用户有没有输入
      if (this.form.orderCode === "") {
        this.$message.warning("请输入订单编号")
      } else if (this.form.suggestion === "") {
        this.$message.warning("请输入一些用户建议")
      } else {
        request.post("/order/usersuggestion/" + this.user.userId,this.form).then(res => {
          if (res.code === '0') {
            this.$message.success("感谢您的宝贵意见,我们会尽快提醒商家")
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
  }
}
</script>

<style>

.custom-label {
  .el-form-item__label {
    font-size: 16px;
    font-weight: bold;
  }
}

</style>